/*
 * @Author: your name
 * @Date: 2020-07-13 21:05:11
 * @LastEditTime: 2021-07-31 23:56:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ts\react_app\src\App.js
 */

import React, { Component,Fragment } from 'react'
import {TransitionGroup,CSSTransition} from 'react-transition-group'
import './animate.css'
import ItemList from './item'
import Animate from './animate'
import TodoList from './todo_list'
import MyContext from './myContext'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.toggleTheme = (newTille) => {
      this.setState({
        title:newTille
      });
    };
    this.state = {
      list: ["头部按摩", '推背'],
      inputvalue: '',
      title:"kais",
      toggleTheme:this.toggleTheme
    }
    //this.setValue = this.setValue.bind(this)

  }
  setValue(ev, kk) {
    //console.log(this.inputdom)
    ev.preventDefault();
    this.setState({
      inputvalue: this.inputdom.value,
    }, () => {
      console.log('222222222')
    })
  }
  add() {
    this.setState({
      list: [this.state.inputvalue, ...this.state.list],
      inputvalue: ''
    })
  }
  dealtItem(index) {
    let oldList = this.state.list
    oldList.splice(index, 1)
    //this.state.list.splice(index,1)
    this.setState({
      list: oldList,
    })
  }

  render() {
    console.log('render............')
    return (
      <Fragment>
        <MyContext.Provider value={{"title":this.state.title,"toggleTheme":this.toggleTheme}}>
        <div>
          <label htmlFor="addText">增加：</label>
          <input
            id="addText"
            type="text"
            value={this.state.inputvalue}
            ref={(inputdom)=>{this.inputdom =inputdom}}
            onChange={(ev) => this.setValue(ev, 1)}
          />
          <button onClick={this.add.bind(this)}>添加服务</button>
        </div>
        <ul>
        <TransitionGroup>
          {
              this.state.list.map((elm, index) => {
                return (
                  <CSSTransition
                      timeout={2000}
                      classNames="boss-text"
                      unmountOnExit
                      appear={true}
                      key={index + elm}
                  >
                      <ItemList
                        index={index}
                        dealtItem={this.dealtItem.bind(this)}
                        content={elm}
                      />
                  </CSSTransition>
                )
              })
            }
          </TransitionGroup>
        </ul>
        <Animate/>
        <TodoList/>
        </MyContext.Provider>
      </Fragment>
    )
  }

  componentWillMount(){
    console.log('1-componentWillMount')
  }

  componentDidMount(){
    console.log('2-componentDidMount')
  }
  //
  shouldComponentUpdate(){
    console.log('更新1-shouldComponentUpdate')
    return true
  }
  componentWillUpdate(){
    console.log('更新2-componentWillUpdate')
  }
  componentDidUpdate(){
    console.log('更新3-componentDidUpdate')
  }
}





